<template>
  <div class="body_all">
    <!-- 操作按钮 -->
    <div class="top_btn"></div>
    <!-- 表格数据 -->
    <div class="center_content">
      <el-table
        ref="multiTableInst"
        v-loading="loading"
        :data="footerPage.currentPageData"
        @select="handleSelect"
        @select-all="handleSelectAll"
        border
        style="width: 100%; padding: 0px"
        :header-cell-style="{
          background: '#fafafa',
          color: 'rgba(56, 56, 56, 1)',
        }"
      >
        <el-table-column prop="title" label="标题" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="220" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="电话" width="220" align="center">
        </el-table-column>
        <el-table-column
          prop="addtime"
          label="提交时间"
          width="180"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="addr"
          label="提交来源"
          width="220"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="address" label="操作" width="180" align="center">
          <template slot-scope="scope">
            <div class="table_btn">
              <button
                id="details"
                class="edit_btn"
                @click="seeDetails(scope.row)"
              >
                查看详情
                <span class="read_c">{{
                  scope.row.read_state === 2 ? "[已读]" : ""
                }}</span>
              </button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页码操作 -->
    <div class="footer">
      <el-button v-if="false" @click="firstPage" size="mini">首页</el-button>
      <span :class="footerPage.currentPage === 1 ? 'ban_btn_no' : ''"
        ><el-button
          id="parentpage"
          @click="prevPage"
          size="mini"
          :class="
            footerPage.currentPage === 1 ? 'ban_btn_stop' : 'page_operable'
          "
          >上一页</el-button
        ></span
      >
      <span class="page_operable">{{ footerPage.currentPage }}</span>
      <span>/</span>
      <span>{{ footerPage.totalPage }}</span>
      <span
        :class="
          footerPage.currentPage === footerPage.totalPage ? 'ban_btn_no' : ''
        "
        ><el-button
          id="nextpage"
          @click="nextPage"
          size="mini"
          :class="
            footerPage.currentPage === footerPage.totalPage
              ? 'ban_btn_stop'
              : 'page_operable'
          "
          >下一页</el-button
        ></span
      >
      <el-button v-if="false" @click="lastPage" size="mini">尾页</el-button>
    </div>
    <Details ref="Popups" :detailsData="detailsData"></Details>
  </div>
</template>

<script>
import Details from "./details.vue"; // 详情页面
export default {
  components: {
    Details,
  },
  data() {
    return {
      loading:false,
      detailsData: [], // 详情数据
      sel_state: false, // 选中状态
      selData: [], // 选中数据
      tableData: [
        {
          id: 1,
          title: "标题内容...",
          name: "张三",
          phone: "15023655871",
          submit_time: "2016-05-02",
          submit_source: "山东省临沂市",
          read_state: 1,
        },
        {
          id: 2,
          title: "标题内容...",
          name: "张三",
          phone: "15023655871",
          submit_time: "2016-05-02",
          submit_source: "山东省临沂市",
          read_state: 1,
        },
        {
          id: 3,
          title: "标题内容...",
          name: "张三",
          phone: "15023655871",
          submit_time: "2016-05-02",
          submit_source: "山东省临沂市",
          read_state: 1,
        },
      ],
      footerPage: {
        list: null,
        listLoading: true,
        totalPage: 1, // 统共页数，默认为1
        currentPage: 1, //当前页数 ，默认为1
        pageSize: 5, // 每页显示数量
        currentPageData: [], //当前页显示内容
        headPage: 1,
      },
    };
  },
  created() {
    this.loading = true;
    this.getDate();
  },
  methods: {
    // 获取列表内容
    getDate() {
      this.$cmsapi
        .MessageList()
        .then((res) => {
          if (res.code === 1 && res.msg === "登录已过期,请重新登录") {
            // 如果身份过期需要退出重新登陆
            var storage = window.localStorage;
            storage.clear();
            setTimeout(() => {
              this.$store.commit("logout", "false");
              this.$router.push({ path: "/login" });
            }, 1000);
            return;
          }
          this.tableData = res.data;
          this.footerPage.totalPage = Math.ceil(
            this.tableData.length / this.footerPage.pageSize
          );
          this.footerPage.totalPage =
            this.footerPage.totalPage == 0 ? 1 : this.footerPage.totalPage;
          this.getCurrentPageData();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 设置当前页面的数据
    getCurrentPageData() {
      let begin = (this.footerPage.currentPage - 1) * this.footerPage.pageSize;
      let end = this.footerPage.currentPage * this.footerPage.pageSize;
      this.footerPage.currentPageData = this.tableData.slice(begin, end);
      this.loading = false;
    },
    // 表格全选状态
    handleSelectAll() {
      if (this.getIsAllChecked()) {
        //全选逻辑
        this.selData = this.footerPage.currentPageData;
        this.sel_state = true;
      } else {
        //取消逻辑
        this.selData = this.$options.data().selData;
        this.sel_state = false;
      }
    },
    getIsAllChecked() {
      //下面这行为获取table组件中的全选checkbox的勾选状态
      return this.$refs.multiTableInst.store.states.isAllSelected;
    },
    // 监听表格单选数据
    handleSelect(rows, row) {
      if (rows.length > 0) {
        this.sel_state = true;
      } else {
        this.sel_state = false;
      }
      this.selData = rows;
    }, //上一页
    prevPage() {
      if (this.footerPage.currentPage == 1) {
        return false;
      } else {
        this.loading = true;
        this.footerPage.currentPage--;
        this.getCurrentPageData();
      }
      document.getElementById("parentpage").blur();
    }, // 下一页
    nextPage() {
      if (this.footerPage.currentPage == this.footerPage.totalPage) {
        return false;
      } else {
        this.loading = true;
        this.footerPage.currentPage++;
        this.getCurrentPageData();
      }
      document.getElementById("nextpage").blur();
    }, //尾页
    lastPage() {
      if (this.footerPage.currentPage == this.footerPage.totalPage) {
        return false;
      } else {
        this.loading = true;
        this.footerPage.currentPage = this.footerPage.totalPage;
        this.getCurrentPageData();
      }
    }, //首页
    firstPage() {
      this.loading = true;
      this.footerPage.currentPage = this.footerPage.headPage;
      this.getCurrentPageData();
    },
    // 查看详情
    seeDetails(obj) {
      obj.read_state = 2;
      this.detailsData = obj;
      this.$refs.Popups.centerDialogVisible = true;
    },
  },
};
</script>
<style scoped>
/* 读取状态 */
.read_c {
  color: #868588;
}
</style>>